<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="title" :width="1200" @close="submitClose">

    <a-tabs v-model:activeKey="activeKey" tab-position="left" animated @change="handleTabsChange">
      <a-tab-pane key="1" tab="商户基本信息" :forceRender="true">
        <caishui-business-form ref="formComponent" :formDisabled="formDisabled" :formBpm="false"
                               @success="submitSuccess"></caishui-business-form>
      </a-tab-pane>
      <a-tab-pane key="2" tab="银行账户" :forceRender="true">
        <CaishuiBusinessBankList ref="businessBankList" :formDisabled="formDisabled" :businessInfo="businessInfo"></CaishuiBusinessBankList>
      </a-tab-pane>
      <a-tab-pane key="3" tab="用户信息" :forceRender="true">
        <CaishuiBusinessUserList ref="businessUserList" :formDisabled="formDisabled" :businessInfo="businessInfo"></CaishuiBusinessUserList>
      </a-tab-pane>
    </a-tabs>

  </BasicModal>
</template>

<script lang="ts">
import { ref, unref } from "vue";
import { BasicModal, useModalInner } from "/@/components/Modal";
import CaishuiBusinessForm from "./CaishuiBusinessForm.vue";
import CaishuiBusinessBankList from "../CaishuiBusinessBankList.vue";
import CaishuiBusinessUserList from "../CaishuiBusinessUserList.vue";

export default {
  name: "CaishuiBusinessModal",
  components: {
    BasicModal,
    CaishuiBusinessForm,
    CaishuiBusinessBankList,
    CaishuiBusinessUserList
  },
  emits: ["register", "success"],
  setup(_p, { emit }) {
    const formComponent = ref();
    const businessBankList = ref();
    const businessUserList = ref();
    const isUpdate = ref(true);
    const formDisabled = ref(false);
    const title = ref("");
    const activeKey = ref('1');
    const businessInfo = ref<any>({});

    //表单赋值
    const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
      setModalProps({
        confirmLoading: false,
        showCancelBtn: false,
        showOkBtn: false
      });
      isUpdate.value = !!data?.isUpdate;
      title.value = data?.isUpdate ? "编辑" : "新增";
      formDisabled.value = !data?.showFooter;
      activeKey.value = "1";
      console.log("data：",data)
      if (unref(isUpdate)) {
        businessInfo.value.id = data.record.id;
        businessInfo.value.name = data.record.name;
        formComponent.value.edit(data.record);
      } else {
        businessInfo.value = {};
        formComponent.value.add({pid: data.pid});
      }
    });

    function handleSubmit() {
      formComponent.value.submitForm();
    }

    function submitSuccess(data) {
      emit("success");
      businessInfo.value.id = data.id;
      businessInfo.value.name = data.name;
    }

    function submitClose() {
      emit("success");
      closeModal();
    }

    function handleTabsChange(key){
      if(key==2){
        businessBankList.value.searchQuery();
      }
      if(key==3){
        businessUserList.value.searchQuery();
      }
    }

    return {
      registerModal,
      title,
      activeKey,
      formComponent,
      businessBankList,
      businessUserList,
      formDisabled,
      businessInfo,
      handleSubmit,
      submitSuccess,
      submitClose,
      handleTabsChange
    };
  }
};
</script>
<style lang="less" scoped>
/** 时间和数字输入框样式 */
:deep(.ant-input-number) {
  width: 100%
}

:deep(.ant-calendar-picker) {
  width: 100%
}
</style>
